<template>
  <div @dragstart="dragStart">
    <div class="card">
      <h4>基础用法</h4>
      <div class="content">
        <Radio :value="true">Radio</Radio>
      </div>
    </div>
    <div class="card">
      <h4>禁用</h4>
      <div class="content">
        <Radio :value="true" disabled>Radio</Radio>
      </div>
    </div>
  </div>
</template>
<script>
import { Radio } from '@/components/data'
export default {
  data() {
    return {
      attributes: Radio,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化时，给各个展示的组件添加拖拽属性
    init() {
      let nodeArr = document.getElementsByClassName('ivu-radio-wrapper')
      for (var i = 0; i < nodeArr.length; i++) {
        nodeArr[i].draggable = true
      }
    },

    // 模拟拖拽组件
    dragStart(e) {
      // 通过attributes上的key去匹配节点上的key
      Object.keys(this.attributes).forEach((item) => {
        // 对于show-sizer这种连字符的属性，在取值时它的key变成了showSizer，所以这种属性，e.target.__vue__中取值要用showSizer
        if (item.indexOf('-') > -1) {
          let keyArr = item.split('-')
          let keyStr = ''
          keyArr.map((item, index) => {
            // '-'字符后面的字符串要开头大写
            keyStr = keyStr + (index > 0 ? item.charAt(0).toUpperCase() + item.slice(1) : item)
          })
          this.attributes[item].value = e.target.__vue__[keyStr]
        } else {
          this.attributes[item].value = e.target.__vue__[item]
        }
      })
      /**
       * 匹配的是dataName，即iview的组件标签，
       * 最终我们展示组件都是基于iview标签的
       */
      let componentName = 'Radio'
      let info = {
        name: componentName,
        ui: 'iview-UI',
        open: false, // 组件树是否展开
      }
      //通过e.dataTransfer方法来存储被拖拽组件的信息，这样在ondrop的时候可以获取这个组件
      e.dataTransfer.setData('info', JSON.stringify(info))
      this.updateAttribute(this.attributes)
    },

    // 延迟更新组件，当组件渲染完成后，我们需要手动给它加上设置的样式
    updateAttribute(attr) {
      setTimeout(() => {
        this.$EventBus.$emit('getAttr', attr)
      }, 1000)
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  margin: 15px;
  i {
    margin-left: 10px;
  }
  .content {
    padding: 10px;
    margin-left: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 10px 0 #ddd;
  }
  button {
    margin: 5px;
  }
  /deep/.ivu-btn-loading,
  /deep/.ivu-btn.disabled > *,
  /deep/.ivu-btn[disabled] > * {
    // 值为none表示：元素不对指针事件做出反应。
    pointer-events: initial;
  }
  /deep/.ivu-row {
    background: rgba(0, 153, 229, 0.7);
  }
}
</style>
